<template>
  <div>
    <searchBox @handleSearch="handleSearch" @handleReset="handleReset">
      <el-form :inline="true" :model="searchFrom.param" label-width="auto" ref="draftSiteFrom">
        <el-form-item label="采集网站" prop="collectionSiteId">
          <el-select v-model="searchFrom.param.collectionSiteId" placeholder="请选择" style="width: 200px" clearable>
            <el-option v-for="dict in sys_currency_site" :key="dict.id" :label="dict.name" :value="dict.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称" prop="name">
          <el-input v-model.trim="searchFrom.param.name" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="更新时间" prop="newTime">
          <el-date-picker v-model="searchFrom.param.newTime" type="datetimerange" start-placeholder="开始日期"
            end-placeholder="结束日期" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss" clearable />
        </el-form-item>
      </el-form>
    </searchBox>
    <!-- <el-button
      type="danger"categoryOptions
      class="mb8"
      @click="handleDeletes(1, choseDeleteId)"
      >删除</el-button
    > -->
    <el-table :data="tableList" @selection-change="handleChange" style="height: calc(100vh - 280px)">
      <el-table-column label="ID" prop="id" width="150" />
      <el-table-column label="采集网站" prop="collectionSiteName" />
      <el-table-column label="分类名称">
        <template #default="scope">
          <el-link :href="scope.row.url" target="_blank" :underline="false">{{
            scope.row.name
          }}</el-link>
        </template>
      </el-table-column>


      <el-table-column label="图片" align="center">
        <template #default="scope">
          <image-preview :src="scope.row.image" :width="50" :height="50" />
        </template>
      </el-table-column>
      <el-table-column label="描述" prop="description" width="200px">
        <template #default="scope">
          <el-tooltip effect="dark" placement="top-start">
            <template #content>
              <div style="max-width: 500px;" v-html="scope.row.newDescription"> </div>
            </template>
            <el-text  line-clamp="2">
              <div v-html="scope.row.newDescription"></div>
            </el-text>
          </el-tooltip>
        </template>
      </el-table-column>

      <el-table-column label="更新时间" prop="newLastModified" align="center" width="180px" />
      <el-table-column label="操作" align="center" width="150px">
        <template #default="scope">
          <el-button link type="primary" @click="handleClick(scope.row)">
            编辑
          </el-button>
          <!-- <el-button @click="handleDeletes(0, scope.row)" link type="danger"
            >删除</el-button
          > -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination :total="total" :limit="searchFrom.pageSize" :page="searchFrom.pageNum" @pagination="handlePageChange">
    </Pagination>
    <el-dialog title="编辑" v-model="dialogVisible" width="700px" append-to-body>
      <el-form :model="editFrom" label-width="auto">
        <el-form-item label="采集网站">
          {{ publicItem.collectionSiteName }}
        </el-form-item>
        <el-form-item label="分类名称" prop="name" required>
          <el-input v-model.trim="editFrom.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="分类描述" prop="description">
          <el-input v-model.trim="editFrom.description" show-word-limit type="textarea" :rows="5" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="SEO标题" prop="seoTitle">
          <el-input v-model.trim="editFrom.seoTitle" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="SEO标签" prop="seoKeywords">
          <el-input v-model.trim="editFrom.seoKeywords" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="SEO描述" prop="seoDescription">
          <el-input v-model.trim="editFrom.seoDescription" placeholder="请输入" type="textarea" rows="5"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="handleCancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const sys_currency_site = ref([]);
const tableList = ref([]); //列表数据
const total = ref(0);
const publicItem = ref({}); //公共赋值对象
const dialogVisible = ref(false); //默认关闭
const choseDeleteId = ref([]);

const searchFrom = ref({
  pageNum: 1,
  pageSize: 20,
  param: {
    collectionSiteId: "",
    name: "",
    startTime: "",
    endTime: "",
  },
});
const editFrom = ref({
  name: "",
  collectionSiteId: null,
  description: "",
  seoDescription: "",
  seoKeywords: "",
  seoTitle: ""
}); //编辑参数
onMounted(() => {
  getList();
  getSiteList();
});
// 搜索
const handleSearch = () => {
  searchFrom.value.param.startTime = null;
  searchFrom.value.param.endTime = null;
  if (searchFrom.value.param.newTime?.length) {
    searchFrom.value.param.startTime = proxy.convertTime(1, searchFrom.value.param.newTime[0]);
    searchFrom.value.param.endTime = proxy.convertTime(1, searchFrom.value.param.newTime[1]);
  }
  getList();
};
// 重置
const handleReset = () => {
  searchFrom.value = {
    pageNum: 1,
    pageSize: 10,
    param: {
      collectionSiteId: "",
      name: "",
      startTime: "",
      endTime: "",
    },
  };
  getList();
};
// 获取列表
const getList = () => {
  product.rawcategory
    .rawcategoryList({
      data: searchFrom.value,
    })
    .then((res) => {
      if (res.data?.length) {
        res.data = res.data.map((code) => {
          return {
            ...code,
            newDescription: proxy.decodeHtmlEntities(code.description),
            newLastModified: proxy.DateTime(code.lastModified),
          };
        });
      }
      total.value = res.total;
      tableList.value = res.data;
    });
};
// 改变分页
const handlePageChange = (newPage) => {
  searchFrom.value.pageNum = newPage.page;
  searchFrom.value.pageSize = newPage.limit;
  getList();
};
// 编辑
const handleClick = (rowItem) => {
  publicItem.value = rowItem;
  editFrom.value.name = rowItem.name;
  editFrom.value.description = rowItem.description;
  editFrom.value.collectionSiteId = rowItem.collectionSiteId;
  editFrom.value.seoTitle = rowItem.seoTitle;
  editFrom.value.seoKeywords = rowItem.seoKeywords;
  editFrom.value.seoDescription = rowItem.seoDescription;
  dialogVisible.value = true;
};
// 确定
const submitForm = () => {
  if (!editFrom.value.name) return proxy.$modal.msgError("分类名称不能为空");
  product.rawcategory
    .rawcategoryUpdate({
      pathParams: {
        id: publicItem.value.id,
      },
      data: editFrom.value,
    })
    .then((res) => {
      if (res.code === 200) {
        proxy.$modal.msgSuccess("修改成功");
        getList();
        stagnation();
      }
    });
};
//  取消
const handleCancel = (rowItem) => {
  stagnation();
};
const stagnation = () => {
  editFrom.value = {
    name: "",
    collectionSiteId: null,
    description: "",
    seoDescription: "",
    seoKeywords: "",
    seoTitle: ""
  }
  dialogVisible.value = false;

};
// 多选删除勾选处理
const handleChange = (selection) => {
  choseDeleteId.value = selection.map((code) => code.id);
};

// 获取站点网站
const getSiteList = () => {
  product.collectionsite
    .collectionsiteList({
      data: {
        pageNum: 1,
        pageSize: 999,
        param: {},
      },
    })
    .then((res) => {
      sys_currency_site.value = res.data;
    });
};
const handleDeletes = (index, rowItem) => {
  let newArrayId = [];
  if (index) {
    publicDeletes(rowItem);
  } else {
    newArrayId.push(rowItem.id);
    publicDeletes(newArrayId);
  }
};

const publicDeletes = (newArray) => {
  if (!newArray.length) return proxy.$modal.msgError("请勾选");
  proxy.$modal.confirm("是否确认删除此数据项？").then(() => {
    product.rawcategory
      .rawcategoryDeletebatch({
        data: {
          ids: newArray,
        },
      })
      .then((res) => {
        if (res.code === 200) {
          proxy.$modal.msgSuccess("删除成功");
          choseDeleteId.value = [];
          getList();
        }
      });
  });
};
</script>